<template>
  <div class="examine">
    <div style="display: flex; justify-content: space-between">
      <div></div>

      <!-- <div>
        <el-input
          style="width: 250px"
          v-model="input"
          placeholder="输入姓名,手机号,身份证进行搜索"
        ></el-input>
        <el-button
          icon="el-icon-search"
          circle
          style="margin-left: 20px"
          @click="likeEmployee()"
        ></el-button>
      </div> -->
    </div>

    <div class="goods-table">
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        stripe
        height="100%"
      >
	  <el-table-column prop="i" label="序号" fixed="left" width="80">
	  </el-table-column>
        <el-table-column prop="userName" label="用户姓名" fit>
        </el-table-column>
        <el-table-column
          prop="managementName"
          label="厂长审核员"
          fit>
        </el-table-column>
        <el-table-column prop="financeName" label="财务审核员" fit>
        </el-table-column>

        <el-table-column prop="userId" label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button size="mini" @click="Employeeupda(scope.row.examineId)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination> -->
    </div>

    <!-- 新增产品 -->
    <el-dialog
      style="margin-top: 0"
      :visible.sync="addFromDialog"
      width="30%"
      :show-close="false"
      :title="title"
    >
      <div>{{ tab2.userName }}</div>
      <div style="height: 30px"></div>
      审核库管：
      <el-select v-model="tab2.managementId" placeholder="请选择审核厂长">
        <el-option
          v-for="item in options1"
          :key="item.id"
          :label="item.nickName"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <br />
      <div style="height: 30px"></div>

      <!-- 审核员 -->
      审核财务：
      <el-select v-model="tab2.financeId" placeholder="请选择审核财务">
        <el-option
          v-for="item in options2"
          :key="item.id"
          :label="item.nickName"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <!-- 保存，取消按钮 -->
      <div style="text-align: center; margin-top: 30px">
        <el-button type="primary" @click="addEmplo">保存</el-button>
        <el-button @click="addFromDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  addEmployeeProfile,
  selectEmployeeProfileByName,
  devicesSelectList, //查询仓库产品列表
  examineList, //管理查询所有用户信息
  examineUpdate, //管理修改
  examineByType, //查询指定类型审核员
} from "../../api/all";
export default {
  components: {},
  data() {
    return {
      //厂长
      options1: "",
      //财务
      options2: "",
      tab2: "",
      tb3: {
        examineId: "",
        userId: "",
        managementId: "",
        financeId: "",
      },
      //搜索框的值
      input: "",
      // 图片预览
      srcList: [],
      srcList2: [],
      //新增标题
      title: "编辑",
      roleType: false,
      cover: "cover",
      // 显示表单
      addFromDialog: false,

      // 表格加载
      loading: false,
      tableData: [],
      //总数页
      total: 1,
      // 分页大小
      pageSize: 5,
      //记录当前页数
      currentPage: 1,
      //审核通过状态
      applyStatus: false,
    };
  },
  mounted() {
    let kes = window.sessionStorage.getItem("loginUser");
    let userObject = JSON.parse(kes);
    if (userObject.roleType == "root") {
      this.roleType = true;
    }
    console.log("userObject", userObject.roleType);
    this.getAllGoods();
  },
  //超级管理员显示功能
  methods: {
    // 格式化时间
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, "0");
      const day = d.getDate().toString().padStart(2, "0");
      const hours = d.getHours().toString().padStart(2, "0");
      const minutes = d.getMinutes().toString().padStart(2, "0");
      const seconds = d.getSeconds().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      // return `${year}-${month}-${day}`;
    },
    startTimeChange(value) {
      this.addEmployeeForm.startTime = dayjs(value).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },
    endTimeChange(value) {
      this.addEmployeeForm.endTime = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },

    // 点击编辑
    Employeeupda(id) {
      this.tableData.forEach((item) => {
        if (item.examineId == id) {
          this.tab2 = item;
        }
      });
      //查询审核员
      examineByType("5").then((res) => {
        this.options1 = res.data;
      });
      //查询财务员
      examineByType("6").then((res) => {
        this.options2 = res.data;
      });
      this.addFromDialog = true;
    },

    //格式化名称
    formatter1(id) {
      this.options1.forEach((item) => {
        if (item.id == id) {
          return item.nickName;
        }
      });
      return id;
    },
    formatter2(id) {
      this.options2.forEach((item) => {
        if (item.id == id) {
          return item.nickName;
        }
      });
      return id;
    },
    //保存
    addEmplo() {
      this.tb3.examineId = this.tab2.examineId;
      this.tb3.userId = this.tab2.userId;
      this.tb3.managementId = this.tab2.managementId;
      this.tb3.financeId = this.tab2.financeId;
      examineUpdate(this.tb3).then((res) => {
        if (res.code) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          this.addFromDialog = false;
          this.getAllGoods();
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    //模糊查询信息
    likeEmployee() {
      selectEmployeeProfileByName(this.input).then((data) => {
        if (data.code) {
          this.tableData = data.data.map((item,index) =>{
			  item.i = index+1;
			  return item;
		  });
        } else {
          this.$message({
            type: "error",
            message: data.message,
          });
        }
      });
    },

    //初始化图片
    imgstatus() {
      let url =
        "https://kris-k.oss-cn-hangzhou.aliyuncs.com/kris/c179093a-41b0-4c70-bc1f-6e5973f35c98-jia.png";
      this.imageUrl = url;
      this.imageUrl2 = url;
    },

    // 查询列表
    getAllGoods() {
      this.loading = true;
      // getGoodsList(this.currentPage, this.pageSize)
      examineList().then((res) => {
        if (res.code) {
          this.total = res.data.total;
          this.tableData = res.data.list.map((item,index) =>{
				item.i = (this.currentPage - 1) * this.pageSize + index + 1;
				return item;
			});
          this.loading = false;
        } else {
          this.$message("列表加载错误");
        }
        console.log("获取商品列表");
      });
    },
    // pageSize变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getAllGoods();
    },
    // 页码变化
    handleCurrentChange(curPage) {
      this.currentPage = curPage;
      this.getAllGoods();
    },
  },
};
</script>

<style scoped>
.page {
  text-align: center;
}

.nameBox {
  overflow: auto; /* 显示滚动条 */
  z-index: 99;
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
  width: 205px;
  height: 170px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
}

.examine{
	height: 100%;
}
.goods-table {
  height: 94%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-top: 10px;
}
.imgUrl {
  width: 100px;
  height: 100px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
.htimg {
  width: 150px;
  height: 150px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
</style>
